<template>
  <div class="main_box">
    <div class="main">
      <div class="left">
        <div id="control"></div>
        <div class="electricity" @click.capture="enter($event)">
          <button class="enery">能流分析</button>
          <div id="electricity"></div>
        </div>
        <div id="conservation"></div>
        <div id="alarm"></div>
      </div>
      <div class="right">
        <div id="deviation"></div>
        <div id="coincidence"></div>
        <div id="forecast"></div>
      </div>
    </div>
  </div>
  <div v-if="show" class="show">
    <Index @off="off"></Index>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onUnmounted } from "vue";
import Index from "@/views/Energy/secoud/index.vue";
import useFontSize from "@/hooks/useFontSize";
let { fontSize } = useFontSize();
let show = ref(false);
let chartColor = "#fff";
// 实时用电
let controlCharts = ref(null);
let controlFn = () => {
  let obj = {
    text: "实时用电监控",
    dataX: [
      { value: "00:00" },
      { value: "00:30" },
      { value: "01:00" },
      { value: "01:30" },
      { value: "02:00" },
      { value: "02:30" },
      { value: "03:00" },
      { value: "03:30" },
    ],
    max: 2000,
    interval: 400,
    series: [
      {
        name: "实际值",
        data: [{ value: 790 }, 800, 750, 780, 750, 760, 760, 810],
        itemStyle: { color: "#1178ea" },
        type: "line",
      },
      {
        name: "均值",
        itemStyle: { color: "#e36c66" },
        data: [
          {
            name: "均值",
            value: 770,
          },
          {
            name: "均值",
            value: 770,
          },
          {
            name: "均值",
            value: 740,
          },
          {
            name: "均值",
            value: 730,
          },
          {
            name: "均值",
            value: 735,
          },

          {
            name: "均值",
            value: 745,
          },
          {
            name: "均值",
            value: 740,
          },
          {
            value: 735,
          },
        ],
        areaStyle: {
          color: "#1c72de",
        },
        type: "line",
      },
    ],
  };
  controlCharts = echarts.init(document.getElementById("control"));
  controlCharts.setOption(optionFn(obj));
};
// 分项用电
let electricityCharts = ref(null);
let electricityFn = () => {
  let option = {
    title: {
      text: "分享用电统计",
      textStyle: {
        color: chartColor,
        fontSize: 18,
      },
      top: 10,
      left: 10,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "center",
      left: "60%",
      width: 20,
      textStyle: {
        color: chartColor,
      },
      selectedMode:false,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "50%"],
        center: ["30%", "55%"],
        itemStyle: {
          borderRadius: 2,
          borderColor: "#9a9a9a",
          borderWidth: 2,
        },
        label: {
          show: true,
          position: "center",
          formatter: () => {
            let str = "63765" + "\n" + `总能耗`;
            return str;
          },
          color: chartColor,
          lineHeight: 16,
          fontSize: 18,
        },
        labelLine: {
          show: true,
        },
        data: [
          { value: 1048, name: "公共设备\n52.8% 33667Kwh" },
          { value: 735, name: "冷冻站\n25.9% 76539Kwh" },
          { value: 580, name: "用户设备" },
          { value: 484, name: "照明插座" },
        ],
      },
      {
        type: "pie",
        color: "#203751",
        radius: ["51%", "52.5%"],
        center: ["30%", "55%"],
        color: "#18434f",
        data: [
          { value: 0, itemStyle: { color: "#18434f" } },
        ],
        labelLine: {
          show: false,
        },
      },
    ],
  };
  electricityCharts = echarts.init(document.getElementById("electricity"));
  electricityCharts.setOption(option);
};
// 月度节能
let conservationCharts = ref(null);
let conservationFn = () => {
  let option = {
    title: {
      text: "月度节能统计",
      textStyle: {
        color: chartColor,
        fontSize: 18,
      },
      top: 10,
      left: 10,
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#1b3b62",
        },
      },
      axisLabel: {
        textStyle: {
          color: chartColor,
        },
      },
    },
    yAxis: [
      {
        name: "(kwh)",
        nameTextStyle: {
          color: chartColor,
        },
        type: "value",
        min: 0,
        max: 400,
        splitLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: chartColor,
          },
        },
      },
      {
        name: "(mm)",
        nameTextStyle: {
          color:chartColor,
        },
        nameLocation: "start",
        show: true,
        type: "value",
        axisLabel: {
          formatter: "{value}%", //右侧以百分比进行展示
          show: true,
          textStyle: {
            color: chartColor,
            fontSize: "12",
          },
        },
        min: -100,
        max: 100,
        splitLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: chartColor,
          },
        },
      },
    ],
    series: [
      {
        data: [320, 322, 301, 334, 390, 330, 320],
        type: "line",
        smooth: true,
        itemStyle: {
          color: "#fc7674",
        },
        areaStyle: {
          color: "#fc7674",
        },
      },
      {
        data: [310, 312, 311, 314, 310, 312, 315],
        type: "line",
        smooth: true,
        itemStyle: {
          color: "#1ba0ac",
        },
        areaStyle: {
          color: "#1ba0ac",
        },
      },
      {
        data: [300, 310, 302, 303, 304, 306, 340, 350],
        type: "line",
        smooth: true,
        itemStyle: {
          color: "#0078f6",
        },
        areaStyle: {
          color: "#0078f6",
        },
      },
    ],
  };
  conservationCharts = echarts.init(document.getElementById("conservation"));
  conservationCharts.setOption(option);
};
// 告警统计
let alarmCharts = ref(null);
let alarmFn = () => {
  let option = {
    title: {
      text: "告警统计",
      textStyle: {
        color: chartColor,
        fontSize: 18,
      },
      top: 10,
      left: 10,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "center",
      left: "60%",
      width: 20,
      textStyle: {
        color: chartColor,
      },
      selectedMode:false,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "50%"],
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: "#9a9a9a",
          borderWidth: 2,
        },
        label: {
          show: true,
          position: "center",
          position: "center",
          show: true,
          formatter: () => {
            let str = "1" + "\n" + `总数`;
            return str;
          },
          color: chartColor,
          lineHeight: 16,
          fontSize: 18,
        },
        labelLine: {
          show: true,
        },
        data: [
          {
            value: 1,
            name: "100%\n 紧急 1",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: "#172030" },
                  { offset: 1, color: "#075fc5" },
                ]),
              },
            },
          },
          { value: 0, name: "0%\n一般 0" },
        ],
      },
      {
        type: "pie",
        color: "#203751",
        radius: ["51%", "52.5%"],
        center: ["30%", "50%"],
        color: "#18434f",
        data: [
          { value: 0, itemStyle: { color: "#18434f" } },
        ],
        labelLine: {
          show: false,
        },
      },
    ],
  };
  alarmCharts = echarts.init(document.getElementById("alarm"));
  alarmCharts.setOption(option);
};
// 上月偏差量
let deviationCharts = ref(null);
let deviationFn = () => {
  const data = [];
  let option = {
    title: [
      {
        text: "上月需量偏差率",
        textStyle: {
          color: chartColor,
          fontSize: 18,
        },
        left: 10,
        top: 10,
      },
      {
        subtext: "F14",
        left: "30%",
        top: "20%",
        textAlign: "center",
        subtextStyle: {
          fontSize: 16,
          color: chartColor,
        },
      },
      {
        subtext: "F19",
        left: "70%",
        top: "20%",
        textAlign: "center",
        subtextStyle: {
          color: chartColor,
          fontSize: 16,
        },
      },
    ],
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "50%"],
        center: ["50%", "60%"],
        data: [
          {
            name: "Apples",
            value: 3.4,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: "rgba(35, 118, 243,0.2)" },
                  { offset: 1, color: "rgba(35, 118, 243,0.8)" },
                ]),
              },
            },
          },
          {
            name: "Strawberries",
            value: 100,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: "rgba(33, 39, 50,0.2)" },
                  { offset: 1, color: "rgba(33, 39, 50,0.8)" },
                ]),
              },
            },
          },
        ],
        itemStyle: {
          borderRadius: 2,
          borderColor: "#9f9f9f",
          borderWidth: 2,
        },
        label: {
          position: "center",
          show: true,
          formatter: () => {
            let str = "3.4%";
            return str;
          },
          color: chartColor,
          lineHeight: 16,
          fontSize: 18,
        },
        labelLine: {
          show: false,
        },
        right: "40%",
        top: 0,
      },
      {
        type: "pie",
        radius: ["52%", "53.5%"],
        center: ["50%", "60%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          borderRadius: 2,
          borderColor: "#9f9f9f",
          borderWidth: 0,
        },
        data: [
          {
            name: "Apples",
            value: 3.4,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: "rgba(35, 118, 243,0.2)" },
                  { offset: 1, color: "rgba(35, 118, 243,0.8)" },
                ]),
              },
            },
          },
          {
            name: "Strawberries",
            value: 100,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: "rgba(126, 126, 126,0.2)" },
                  { offset: 1, color: "rgba(126, 126, 126,0.8)" },
                ]),
              },
            },
          },
        ],
        right: "40%",
        top: 0,
      },
      {
        type: "pie",
        radius: ["40%", "50%"],
        center: ["50%", "60%"],
        data: [
          {
            name: "Apples",
            value: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: "rgba(39, 117, 239,0.2)" },
                  { offset: 1, color: "rgba(39, 117, 239,0.8)" },
                ]),
              },
            },
          },
          {
            name: "Strawberries",
            value: 100,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: "rgba(34, 44, 56,0.2)" },
                  { offset: 1, color: "rgba(34, 44, 56,0.8)" },
                ]),
              },
            },
          },
        ],
        label: {
          position: "center",
          show: true,
          formatter: () => {
            let str = "10%";
            return str;
          },
          color: chartColor,
          lineHeight: 16,
          fontSize: 18,
        },
        itemStyle: {
          borderRadius: 2,
          borderColor: "#9f9f9f",
          borderWidth: 2,
        },
        labelLine: {
          show: false,
        },
        left: "40%",
        top: 0,
      },
      {
        type: "pie",
        radius: ["52%", "53.5%"],
        center: ["50%", "60%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          borderRadius: 2,
          borderColor: "#9f9f9f",
          borderWidth: 0,
        },
        data: [
          {
            name: "Apples",
            value: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: "rgba(39, 117, 239,0.2)" },
                  { offset: 1, color: "rgba(126, 126, 126,0.8)" },
                ]),
              },
            },
          },
          {
            name: "Strawberries",
            value: 100,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: "rgba(126, 126, 126,0.2)" },
                  { offset: 1, color: "rgba(126, 126, 126,0.8)" },
                ]),
              },
            },
          },
        ],
        left: 0,
        left: "40%",
        top: 0,
        bottom: 0,
      },
    ],
  };
  deviationCharts = echarts.init(document.getElementById("deviation"));
  deviationCharts.setOption(option);
};
// 符合度
let coincidenceCharts = ref(null);
let coincidenceFn = () => {
  const data = [];
  let option = {
    title: [
      {
        text: "上月需量偏差率",
        textStyle: {
          color: chartColor,
          fontSize: 18,
        },
        left: 10,
        top: 10,
      },
      {
        subtext: "本月\n达标值95%",
        left: "30%",
        top: "60%",
        textAlign: "center",
        subtextStyle: {
          color: chartColor,
        },
      },
      {
        subtext: "本月\n达标值91%",
        left: "70%",
        top: "60%",
        textAlign: "center",
        subtextStyle: {
          color: chartColor,
        },
      },
    ],
    series: [
      {
        type: "gauge",
        radius: "45%",
        center: ["30%", "50%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 100,
        splitNumber: 4,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "rgba(98, 99, 182,.1)" },
              { offset: 1, color: "rgba(98, 99, 182,.8)" },
            ]),
          },
        },
        progress: {
          show: true,
          width: 20,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 20,
          },
        },
        axisTick: {
          distance: 5,
          splitNumber: 5,
          lineStyle: {
            width: 1,
            color: chartColor,
          },
        },
        splitLine: {
          distance: 12,
          length: 8,
          lineStyle: {
            width: 2,
            color: chartColor,
          },
        },
        axisLabel: {
          distance: 20,
          color: chartColor,
          fontSize: 12,
        },
        anchor: {
          show: false,
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          width: "60%",
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, "-5%"],
          fontSize: 16,
          fontWeight: "bolder",
          formatter: "{value}%",
          color:chartColor,
        },
        data: [
          {
            value: 95,
          },
        ],
        right: "40%",
        top: 0,
      },
      {
        type: "gauge",
        radius: "45%",
        center: ["70%", "50%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 100,
        splitNumber: 4,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "rgba(11, 119, 252,0.1)" },
              { offset: 1, color: "rgba(11, 119, 252,0.8)" },
            ]),
          },
        },
        progress: {
          show: true,
          width: 20,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 20,
          },
        },
        axisTick: {
          distance: 5,
          splitNumber: 5,
          lineStyle: {
            width: 1,
            color: chartColor,
          },
        },
        splitLine: {
          distance: 12,
          length: 8,
          lineStyle: {
            width: 2,
            color: chartColor,
          },
        },
        axisLabel: {
          distance: 25,
          color: chartColor,
          fontSize: 12,
        },
        anchor: {
          show: false,
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          width: "60%",
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, "-5%"],
          fontSize: 16,
          fontWeight: "bolder",
          formatter: "{value}%",
          color: chartColor,
        },
        data: [
          {
            value: 91,
          },
        ],
        left: 0,
        left: "60%",
        top: 0,
        bottom: 0,
      },
    ],
  };
  coincidenceCharts = echarts.init(document.getElementById("coincidence"));
  coincidenceCharts.setOption(option);
};

// 需量预测
let forecastCharts = ref(null);
let forecastFn = () => {
  const data = [];
  let option = {
    title: [
      {
        text: "需量预测",
        textStyle: {
          color: chartColor,
          fontSize: 18,
        },
        left: 10,
        top: 10,
      },
    ],
    xAxis: {
      type: "category",
      data: [
        "00",
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
      ],
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#1b3b62",
        },
      },
      axisLabel: {
        textStyle: {
          color: chartColor,
        },
      },
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 3000,
      interval: 600,
      axisLine: {
        lineStyle: {
          color: "#1b3b62",
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: chartColor,
        },
      },
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
        areaStyle: {},
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(17, 118, 233,1)" },
              { offset: 1, color: "rgba(17, 118, 233,0.3)" },
            ]),
          },
        },
      },
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
        itemStyle: {
          normal: {
            lineStyle: {
              width: 3,
              type: "dotted", //'dotted'虚线 'solid'实线
              color: "#b1b2a7",
            },
          },
        },
      },
      {
        data: [
          3000, 3000, 3000, 3000, 3000, 3000, 3000, 3000, 3000, 3000, 3000,
          3000,
        ],
        type: "line",
        smooth: true,
        showSymbol: false,
        itemStyle: {
          normal: {
            lineStyle: {
              width: 3,
              type: "dotted", //'dotted'虚线 'solid'实线
              color: "#877987",
            },
          },
        },
      },
    ],
  };
  forecastCharts = echarts.init(document.getElementById("forecast"));
  forecastCharts.setOption(option);
};
function optionFn(obj) {
  let option = {
    title: {
      text: obj.text,
      textStyle: {
        color: chartColor,
        fontSize: 18,
      },
      left: 10,
      top: 10,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "60%",
      textStyle: {
        color: chartColor,
      },
      selectedMode:false,
    },
    xAxis: {
      type: "category",
      data: obj.dataX,
      axisTick: {
        show: false,
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置。
        // 更改x轴文字颜色的配置
        textStyle: {
          color: chartColor, //处理x轴的文字颜色【粉色】
        },
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      min: 0,
      max: obj.max,
      axisLabel: {
        //坐标轴刻度标签的相关设置。
        // 更改x轴文字颜色的配置
        textStyle: {
          color: chartColor, //处理x轴的文字颜色【粉色】
        },
      },
      interval: obj.interval,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: { show: false },
    },
    series: obj.series,
  };
  return option;
}
// 显示页面
let enter = (e) => {
  if (e.target.firstChild) {
    show.value = true;
  }
};
let off = (flag) => {
  show.value = flag;
};
onMounted(() => {
  alarmFn();
  conservationFn();
  electricityFn();
  controlFn();
  deviationFn();
  coincidenceFn();
  forecastFn();
  window.addEventListener("resize", () => {
    alarmCharts.resize();
    conservationCharts.resize();
    electricityCharts.resize();
    controlCharts.resize();
    deviationCharts.resize();
    coincidenceCharts.resize();
    forecastCharts.resize();
  });
});
onUnmounted(() => {
  alarmCharts.dispose();
  conservationCharts.dispose();
  electricityCharts.dispose();
  controlCharts.dispose();
  deviationCharts.dispose();
  coincidenceCharts.dispose();
  forecastCharts.dispose();
});
</script>
<style scoped>
.main_box {
  width: 100%;
  display: flex;
  align-items: center;
}
.main {
  width: 100%;
  height: 100vh;
}
.left {
  float: left;
}
#control,
#electricity,
#conservation,
#alarm {
  width: 4rem;
  height: 2.1rem;
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
}
.right {
  float: right;
}
.right div {
  width: 4rem;
  height: 2.6rem;
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
}
#electricity {
  z-index: -9999;
}
.electricity {
  position: relative;
  pointer-events: auto;
  /* z-index: 99999; */
}
.electricity .enery {
  position: absolute;
  top: 13%;
  left: 22%;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0.02rem 0.1rem;
  color: #fff;
  font-size: 14px;
  background-color: #0058bf;
  pointer-events: none;
  z-index: 99999;
}
.show {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(96, 93, 93, 0.5);
  z-index: 99999;
}
</style>
